import { Avatar, Skeleton } from 'antd';
import { FC } from 'react';
import useStyles from './style.style';

const PageHeaderContent: FC<{
  currentUser: API.LoginUserVO;
}> = ({ currentUser }) => {
  const { styles } = useStyles();
  const loading = currentUser && Object.keys(currentUser).length;
  if (!loading) {
    return (
      <Skeleton
        avatar
        paragraph={{
          rows: 1,
        }}
        active
      />
    );
  }
  return (
    <div className={styles.pageHeaderContent}>
      <div className={styles.avatar}>
        <Avatar
          size="large"
          src={
            currentUser.avatar ??
            'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
          }
        />
      </div>
      <div className={styles.content}>
        <div className={styles.contentTitle}>
          早安
          {currentUser.username}
          ，祝你开心每一天！
        </div>
        <div>{currentUser.profile}</div>
      </div>
    </div>
  );
};

export default PageHeaderContent;
